<template>
   <div class="icons">
     <swiper :options="swiperOption">
        <swiper-slide v-for="(page,index) in pages" :key="index">
           <div class="icon" v-for="item in page" :key="item.id">
             <div class="icon-img">
             <img class="icon-img-imgcontent" :src="item.imgUrl">
             </div>
             <p class="icon-desc">{{item.desc}}</p>
           </div>
       </swiper-slide>
 
    </swiper>
   </div>
</template>

<script>
export default {
  name:'HomeIcons',
  data (){
      return{
          iconList:[{
              id:'0001',
              imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
              desc:'景点门票'
          },{
             id:'0002',
              imgUrl:'http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png',
              desc:'广州必游'  
          },{
             id:'0003',
              imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/76/eb88861d78fb9902.png',
              desc:'动植物园'  
          },{
              id:'0004',
              imgUrl:'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/a40ee278d67000f2a29d2e20f6a029b3.png',
              desc:'自然风光'   
          },{
              id:'0005',
              imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/3e/86314b2af03b7502.png',
              desc:'珠江夜游'  
          },{
              id:'0006',
              imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/47/c2b659e048b11602.png',
              desc:'长隆亲子月'
          },{
              id:'0007',
              imgUrl:'http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png',
              desc:'一日游'
          },{
              id:'0008',
              imgUrl:'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/184e261814a5d07a5d3d08cd29cf590d.png',
              desc:'长隆度假区'
          },{
              id:'0009',
              imgUrl:'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/c032ae43b15a3dac34b5e07bb0e46850.png',
              desc:'广州塔'
          },{
              id:'0010',
              imgUrl:'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20194/bda58ffc3016edad84e656e8a94b0321.png',
              desc:'广州融创'
          }],
          swiperOption:{ 
              loop:false
              }       
      }
  },
  computed:{  /*让这10个景点可以翻页实现轮播效果 */
    pages (){
        const pages = []
        this.iconList.forEach((item,index) =>{
           const page =Math.floor(index / 8)
           if(!pages[page]){
               pages[page] = []
           }
           pages[page].push(item)
        })
        return pages
    }
  }
}
</script>

<style scoped>
 .icons >>> .swiper-container{
     height: 0;
     padding-bottom: 50%;
 }
 .icons{
     margin-top:5px;
 }
 .icon{
     position: relative;
     overflow: hidden;
     float:left;
     width:25%;
     height:0;
     padding-bottom: 25%;
 }
 .icon-img{
     position:absolute;
     top:0;
     left:0;
     right: 0;
     bottom: 30px;
     box-sizing: border-box;

 }
 .icon-desc{
     position: absolute;
     left:0;
     right:0;
     color:#333;
     bottom:-15px;
     height:30px;
     text-align: center;
     line-height:30px;
     overflow: hidden;
     white-space: nowrap;
     text-overflow:ellipsis; /*这三行代码实现单行文本溢出时显示省略号*/
 }
 .icon-img-imgcontent{
    display:block;
    margin:0 auto;
    height:100%;
 }
</style>
